<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs
} from 'vue'
import LoginTemplate from '../../components/LoginTemplate/index.vue'
import LoginForm from '../../components/LoginForm/index.vue'
import {
  type FormItemConfig
} from '../../types/loginForm.ts'

export default defineComponent({
  components: {
    LoginTemplate,
    LoginForm
  },
  setup() {
    const state = reactive({})

    const componentList: FormItemConfig[] = [
      {type: 'input', label: '用户名', prop: 'userName', placeholder: '输入用户名'},
      {type: 'password', label: '密码', prop: 'password', placeholder: '输入密码'},
      {type: 'code', label: '验证码', prop: 'code1', placeholder: '输入验证码'},

      {type: 'phone', label: '手机号', prop: 'phone', placeholder: '输入手机号'},
      {type: 'input', label: '短信验证码', prop: 'userName1', placeholder: '输入短信验证码'},
      // {type: 'email', label: '邮箱', prop: 'mail', placeholder: '输入邮箱'},
      // {type: 'code', label: '手机验证码', prop: 'code2', placeholder: '输入邮箱验证码'},
      // {
      //   type: 'select',
      //   label: '登录类型',
      //   prop: 'type',
      //   placeholder: '选择登录类型',
      //   items: [{label: '用户登录', value: 0}, {label: '管理登录', value: 1}]
      // }
    ]

    const handleSendMsgPhone = (prop: string, phone: string) => {
      console.log(prop, phone)
    }

    const handleSendMsgMail = (prop: string, email: string) => {
      console.log(prop, email)
    }

    const handleGetCode = (prop: string) => {
      console.log(prop)
    }

    const handleSubmit = (formData: Record<string, string | number | null>) => {
      console.log(formData)
    }

    return {
      ...toRefs(state),
      componentList,
      handleSendMsgPhone,
      handleSendMsgMail,
      handleGetCode,
      handleSubmit
    }
  }
})
</script>

<template>
  <div class="login-container">
    <login-template form-position="center">
      <login-form :component-list="componentList" @send-msg-phone="handleSendMsgPhone"
                  @send-msg-mail="handleSendMsgMail" @get-code="handleGetCode" @submit="handleSubmit" />
    </login-template>
  </div>
</template>

<style lang="scss">
.login-container {
  height: 100%;
}
</style>
